import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface WeatherPeriod {
  id: string;
  time: string;
  weather: string;
  icon?: string;
  iconType?: 'image' | 'gradient' | 'shape';
  iconGradient?: string[];
}

export interface WeatherTab {
  id: string;
  text: string;
  isActive?: boolean;
  backgroundImage?: string;
  backgroundColor?: string;
  borderColor?: string;
  borderRadius?: string;
  onClick?: () => void;
}

export interface WeatherForecastPanelProps {
  width?: string | number;
  height?: string | number;
  tabs?: WeatherTab[];
  periods?: WeatherPeriod[];
  activeTabTextColor?: string;
  inactiveTabTextColor?: string;
  timeTextColor?: string;
  weatherTextColor?: string;
  tabFontSize?: number;
  timeFontSize?: number;
  weatherFontSize?: number;
  tabFontWeight?: string | number;
  timeFontWeight?: string | number;
  weatherFontWeight?: string | number;
  defaultActiveTab?: string;
  onTabClick?: (tab: WeatherTab, index: number) => void;
  onPeriodClick?: (period: WeatherPeriod, index: number) => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const WeatherForecastPanel = forwardRef<HTMLDivElement, WeatherForecastPanelProps>((props, ref) => {
  const {
    width = 500,
    height = 1080,
    iconPath = 'static/images/qixiangfangzhai/bz33.png',
    alertText = '当前无预警',
    alertTextColor = '#00FFF1',
    headerTextColor = '#56A5FF',
    recordTextColor = 'rgba(255,255,255,0.9)',
    tableHeaders = [
      { key: 'title', value: '事件名称', width: '25' },
      { key: 'month', value: '时间', width: '15' },
      { key: 'type', value: '当前状态', width: '15' },
      { key: 'address', value: '位置', width: '32' },
      { key: 'expiring', value: '等级', width: '13' },
    ],
    records = [
      { id: '1', title: '事件名称', month: '07-01', address: '华阳老街是这里呀', type: '问题分类',  expiring: '一级'},
      { id: '2', title: '事件名称', month: '07-02', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '3', title: '事件名称', month: '07-03', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '4', title: '事件名称', month: '07-04', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '5', title: '事件名称', month: '07-05', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '6', title: '事件名称', month: '07-06', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '7', title: '事件名称', month: '07-07', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '8', title: '事件名称', month: '07-08', address: '地址', type: '问题分类', expiring: '一级' },
    ],
    tabs = [
      {
        id: '2hour',
        text: '2小时气象预报',
        isActive: true,
        backgroundImage: 'static/imagesstatic/images/qixiangfangzhai/bz149bf.png'
      },
      {
        id: '7day',
        text: '7天气象预报',
        isActive: false,
        backgroundColor: 'rgba(5,18,34,0.2)',
        borderColor: '#3A4E74',
        borderRadius: '0px 4px 4px 0px'
      }
    ],
    periods = [
      {
        id: '1',
        time: '17时',
        weather: '小雨',
        iconType: 'image',
        icon: 'static/imagesstatic/images/qixiangfangzhai/weather-rain-light.png'
      },
      {
        id: '2',
        time: '21时',
        weather: '大雨',
        iconType: 'image',
        icon: 'static/imagesstatic/images/qixiangfangzhai/weather-rain-heavy.png'
      },
      {
        id: '3',
        time: '1时',
        weather: '晴',
        iconType: 'gradient',
        iconGradient: ['#FFFFFF', '#FFEC91']
      },
      {
        id: '4',
        time: '5时',
        weather: '晴',
        iconType: 'gradient',
        iconGradient: ['#FFFFFF', '#FFEC91']
      },
      {
        id: '5',
        time: '9时',
        weather: '多云',
        iconType: 'image',
        icon: 'static/imagesstatic/images/qixiangfangzhai/weather-cloudy.png'
      }
    ],
    activeTabTextColor = '#FFFFFF',
    inactiveTabTextColor = 'rgba(255,255,255,0.9)',
    timeTextColor = '#FFFFFF',
    actionIcon = 'static/images/qixiangfangzhai/bz9.png',
    weatherTextColor = 'rgba(255,255,255,0.8)',
    tabFontSize = 14,
    timeFontSize = 16,
    weatherFontSize = 16,
    tabFontWeight = 400,
    timeFontWeight = 500,
    weatherFontWeight = 400,
    defaultActiveTab = '2hour',
    onTabClick,
    onPeriodClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  } as React.CSSProperties;

  const handleTabClick = (tab: WeatherTab, index: number) => {
    setActiveTab(tab.id);
    setActiveTabIndex(index);
    if (onTabClick) {
      onTabClick(tab, index);
    }
  };

  const handlePeriodClick = (period: WeatherPeriod, index: number) => {
    if (onPeriodClick) {
      onPeriodClick(period, index);
    }
  };

  const weatherForecastPanelClassName = ['weather-forecast-panel', theme, className].filter(Boolean).join(' ');

  const renderWeatherIcon = (period: WeatherPeriod) => {
    if (period.iconType === 'gradient' && period.iconGradient) {
      return (
        <div
          className="weather-icon gradient-icon"
          style={{
            background: `linear-gradient(180deg, ${period.iconGradient[0]} 0%, ${period.iconGradient[1]} 100%)`
          }}
        />
      );
    } else if (period.iconType === 'image' && period.icon) {
      return (
        <div
          className="weather-icon image-icon"
          style={{
            backgroundImage: `url(${period.icon})`
          }}
        />
      );
    } else {
      return (
        <div className="weather-icon default-icon" />
      );
    }
  };

  return (
    <div
      ref={ref}
      className={weatherForecastPanelClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="top-wrap">
        <div className="title-wrap" style={{backgroundImage: 'url(static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>气象预测</div>
              <div className="sen-title">气象预测</div>
            </div>
            <div className="subtitle">Weather Forecast</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="air-area">
            {/* 预报类型选项卡 */}
            <div className="top-title-wrap">
              <div className="tab-selector">
                {tabs.map((tab, index) => (
                  <div
                    key={tab.id}
                    className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
                    onClick={() => handleTabClick(tab, index)}
                  >
                    {tab.text}
                  </div>
                ))}
              </div>
              <div style={{backgroundImage: actionIcon ? `url(${actionIcon})` : undefined, width: '20px', height: '20px', backgroundSize: 'cover'}}></div>
            </div>
            {/* 天气预报时段 */}
            <div className="weather-periods">
              {periods.map((period, index) => (
                <div
                  key={period.id}
                  className="weather-period"
                  onClick={() => handlePeriodClick(period, index)}
                >
                  {/* 时间 */}
                  <div
                    className="period-time"
                    style={{
                      color: timeTextColor,
                      fontSize: `${timeFontSize}px`,
                      fontWeight: timeFontWeight
                    }}
                  >
                    {period.time}
                  </div>

                  {/* 天气图标 */}
                  <div className="period-icon">
                    {renderWeatherIcon(period)}
                  </div>

                  {/* 天气描述 */}
                  <div
                    className="period-weather"
                    style={{
                      color: weatherTextColor,
                      fontSize: `${weatherFontSize}px`,
                      fontWeight: weatherFontWeight
                    }}
                  >
                    {period.weather}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(static/images/zonghezhifa/point-icon-blue.png)'}} />
            <div className="head-title">台风路径图</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(static/images/zonghezhifa/left-icon-blue.png)'}} />
            <div className="plus-icon" style={{backgroundImage: 'url(static/images/zonghezhifa/plus-icon.png)'}} />
          </div>
          <div className="img-area"></div>
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-wrap">
        <div className="title-wrap" style={{backgroundImage: 'url(static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>全国气象</div>
              <div className="sen-title">全国气象</div>
            </div>
            <div className="subtitle">National Weather</div>
          </div>
          <div className="icon" style={{backgroundImage: 'url(static/images/yuangongguanli/plus-icon.png)'}} />
        </div>
        <div className="content-wrap">
          <div className="alert-area">
            <div className="horn-item left-top" />
            <div className="horn-item right-top" />
            <div className="horn-item left-bottom" />
            <div className="horn-item right-bottom" />
            {/* 背景容器 */}
            <div className="alert-background" />

            {/* 预警图标 */}
            <div
              className="alert-icon"
              style={{
                width: '32px',
                height: '32px',
                backgroundImage: iconPath ? `url(${iconPath})` : undefined
              }}
            />

            {/* 预警文字 */}
            <div
              className="alert-text"
              style={{
                color: alertTextColor,
                fontSize: '16px',
                fontWeight: 500,
                letterSpacing: '0.57px',
                textAlign: 'left'
              }}
            >
              {alertText}
            </div>
          </div>
          {/* 表格区域 */}
          <div className="table-area">
            {/* 表头 */}
            <div className="table-header" style={{backgroundImage:`url(http://localhost:8085/static/images/qixiangfangzhai/bz54.png)`}}>
              {tableHeaders.map((head,value) => (
                <div
                  className="header-cell"
                  style={{ color: headerTextColor, width: `${head.width}%` }}
                >
                  {head.value}
                </div>
              ))}
            </div>
            {/* 表格数据 */}
            <div className="table-body"  style={{height: 'calc(100% - 40px)'}}>
              {records.map((record, index) => (
                <div
                  key={record.id}
                  className="table-row"
                >
                  {tableHeaders.map((head) => (
                    <div
                      className="table-cell"
                      style={{ color: recordTextColor, width: `${head.width}%` }}
                    >
                      {record[head.key]}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="bottom-line" />
      </div>
    </div>
  );
});

WeatherForecastPanel.displayName = 'WeatherForecastPanel';

export default WeatherForecastPanel;
